<template>
  <div>
    <!-- 搜索框 -->
    <HeadNav :iconName="iconName" />

    <!-- 轮播图 -->
    <Swiper :bannerList="bannerList" />

    <!-- 按钮组 -->
    <BtnBlock />

    <!-- 模块组 -->
    <InfoBlock :houseList="houseList" />

    <!-- 假设6条加载完成 -->
    <div class="show-info" v-if="page >= 6">暂无数据，请老板别处转转...</div>
  </div>
</template>

<script>
import api from "../../api";
import Swiper from "../../components/mySwiper/MySwiper";
import InfoBlock from "./infoBlock/InfoBlock";
import BtnBlock from "./btnBlock/BtnBlock";
import HeadNav from "./headNav/HeadNav";
import loading from "./pullLoading/pullLoading.js";

export default {
  components: {
    HeadNav,
    Swiper,
    BtnBlock,
    InfoBlock,
  },
  data() {
    return {
      bannerList: [],
      page: 1,
      houseList: [],
      iconName: "location-o",
    };
  },
  mounted() {
    api.gotoHomeBanner().then((res) => {
      // console.log(res.data.list);
      this.bannerList = res.data.list;
    });
    this.http(this.page);

    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    http(page) {
      api.gotoHomeHouse(page).then((res) => {
        // console.log(res.data);
        // this.houseList = res.data.list;
        this.houseList = [...this.houseList, ...res.data.list];
        this.page++;
      });
    },
    handleScroll() {
      if (this.page < 6) {
        loading(this.page, this.http);
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
.show-info {
  text-align: left;
  font-size: 16px;
  color: #ff5555;
  background-color: rgba(204, 204, 204, 0.3);
  border-bottom: 0.01rem solid;
  padding: 0.2rem 0 0.1rem 0.3rem;
}
</style>